<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	body{
		font-size: 9pt;
	}
	#panel{
		width: 600px;
		height: 300px;
		border: 1px solid #999;
		position: relative;
	}
	#bar{
		position: absolute;
		left: 50px;
		top: 190px;
		width:500px;
		height:20px;
		background: #f30;
	}
	
	#img1{
		position: absolute;
		left: 50px;
		top: 120px;
	}
	#nav{
		text-align: center;
		width: 600px;
	}
</style>
<script>
	var endX,currentX,startX,timerId,step,objImg;
	
	var init = function(){
		var objBar = document.getElementById("bar");
		
		startX = objBar.offsetLeft;
		currentX = startX;
		endX = (objBar.offsetWidth + startX)-128;
		step = 2;
		timerId = 0;
		objImg = document.getElementById("img1");
	}
	
	var start = function(){
		if(timerId===0)
			timerId=setInterval(move,30);
	}
	var move = function(){		
		currentX += step;
		if(currentX > endX){
			currentX = endX;
			step = -2;
		}
		
		if(currentX<startX){
			currentX  = startX;
			step =2;
		}
		objImg.style.left = currentX+"px";
	}
	
	var stop=function(){
		if(timerId!==0){
			clearInterval(timerId);
			timerId=0;
		}
	}
	
	window.onload=function(e){
		var btn =  document.getElementById("btn_start");
		btn.onclick=function(e){
			init();
			start();
		}
		var btn2= document.getElementById("btn_stop");
		btn2.onclick = function(e){
			stop();
		}
	}
</script>

</head>
<body>
<div> 
		<h4>#img1을 #bar의 영역에서 계속 좌우로 움직이도록 만들어주세요.</h4>
		<div id="panel">
			<div id="bar"> </div>
			<div id="img1">
				<img src="../images/fish.png">
			</div>
		</div>
		<div id="nav">
			<button id="btn_start">시작</button>
			<button id="btn_stop">멈춤</button>
		</div>
	</div>       
</body>
</html>